<template>
    <el-tabs class="cmpt-bar" v-model="currtabsName" tab-position="left">
        <el-tab-pane v-for="item in options" :key="item.id" :name="item.id">
            <div slot="label" class="tab-item">
                <i :class="item.icon"></i>
                <span class="name" :class="{ active: currtabsName === item.id }">{{ item.name }}</span>
            </div>
            <panel :pointer="pointer" :datas="getDatas(item.json)" />
        </el-tab-pane>
    </el-tabs>
</template>

<script>
import Panel from './panel.vue';
import menus from './menus';

import textDisplayJson from './cmp/textDisplay.json';
import numDisplayJson from './cmp/numDisplay.json';
import numControlJson from './cmp/numControl.json';
import mulStatusControlJson from './cmp/mulStatusControl.json';
import btnControlJson from './cmp/btnControl.json';
import hstoricalDataJson from './cmp/hstoricalData.json';
import otherJson from './cmp/other.json';

export default {
    name: 'CmptBar',
    components: {
        Panel,
    },
    props: {
        pointer: Object,
    },
    data() {
        return {
            currtabsName: menus[0].id,
            options: menus,

            textDisplayJson: textDisplayJson,
            numDisplayJson: numDisplayJson,
            numControlJson: numControlJson,
            mulStatusControlJson: mulStatusControlJson,
            btnControlJson: btnControlJson,
            hstoricalDataJson: hstoricalDataJson,
            otherJson: otherJson, // 其他组件
        };
    },
    methods: {
        getDatas(name) {
            return this[name];
        },
    },
};
</script>

<style lang="scss" scoped>
.cmpt-bar {
    height: 100%;
    background: #ffffff;
    border-right: 1px solid #f2f4f6;

    ::v-deep .el-tabs__header {
        margin: 0;
        background: #f7f8fa;

        .el-tabs__item {
            padding: 8px;
            color: #323232;
            height: 100%;
            width: 80px;

            .tab-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 14px;

                i {
                    font-size: 26px;
                }

                .name {
                    font-size: 12px;
                    font-weight: 500;
                    line-height: 24px;
                    text-align: center;
                    white-space: normal;
                }
            }

            &.is-active {
                color: #486ff2;
                background: #ffffff;
            }
        }

        .el-tabs__active-bar {
            background: transparent;
        }

        .el-tabs__nav-wrap::after {
            background-color: transparent;
        }
    }

    .active {
        color: #486ff2 !important;
    }

    ::v-deep .el-tabs__content {
        height: 100%;

        .el-tab-pane {
            height: 100%;
        }

        .el-submenu__title {
            height: 46px;
            line-height: 46px;
            font-size: 13px;
        }
    }
}
</style>
